<template>
  <div id="main">
    <div class="digital">
      <div class="digital-center">
        <div class="cen-top">数字化水平评测介绍</div>
        <div class="tit_hr">
          <div class="tit_red"></div>
          <div class="tit_blue"></div>
        </div>
        <div class="tit_sec">INTRODUCTION TO DIGITAL LEVEL EVALUATION</div>
        <div class="cen_con">
          为助力中小企业数字化转型，受工业和信息化部委托，中国工业互联网研究院联合13个企事业单位共同研究制定了中小企业数字化水平评价标准。根据行业特点，分为制造业、生产性服务业、其他行业三个类别，从数字化基础、经营、管理、成效四个维度综合评估中小企业数字化发展水平，并依据企业评测得分，将数字化水平划分为四个等级。广大中小企业可根据自身实际情况通过此平台完成自测。
        </div>
        <div class="btn_list">
          <div class="btn_fir">
            <router-link
              :to="{ path: '/fz_evaluate_industry', query: { companyName: $route.query.companyName, creeditCode: $route.query.creeditCode } }">
              <div class="link-i">
                <i class="el-icon-edit"></i>
              </div>
              <div class="link-text">
                自测答题
              </div>
            </router-link>
          </div>
          <div class="btn_fir">
            <router-link
              :to="{ path: '/fz_enterprise_evaluation_score_record', query: { creeditCode: $route.query.creeditCode } }">
              <div class="link-i">
                <i class="icon-ym icon-ym-wf-batchTable"></i>
              </div>
              <div class="link-text">
                评测结果
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "outiIndex",
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'digital digital digital digital';
  background: url('../../../assets/images/digital_back.jpg');
  background-size: 100% 100%;
}

.digital {
  grid-area: digital;
  margin: 15vh auto;

  .digital-center {
    width: 1300px;

    .cen-top {
      font-size: 33px;
      font-weight: 700;
      text-align: center;
      color: #000;
    }

    .tit_sec {
      font-weight: 400;
      text-align: center;
      font-size: 13px;
      color: #ccc;
      margin-bottom: 20px;
    }

    .tit_hr {
      width: 310px;
      height: 2px;
      margin: 10px auto;
      display: flex;

      .tit_red {
        width: 155px;
        height: 3px;
        background-color: #1890ff;
      }

      .tit_blue {
        width: 155px;
        height: 3px;
        background-color: #1890ff;
      }
    }

    .cen_con {
      font-size: 16px;
      font-weight: 400;
      margin-top: 50px;
      line-height: 30px;
      text-align: justify;
      text-indent: 2em;
    }

    .btn_list {
      height: 150px;
      margin-top: 80px;
      display: flex;

      .btn_fir {
        width: 380px;
        height: 100%;
        margin: auto;
        border-radius: 30px;
        transform: translateY(-5px);
        box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.15);

        .link-i,
        i {
          width: 20%;
          font-size: 50px;
          font-weight: bold;
        }

        &:hover {
          transform: translateY(-15px);
          box-shadow: 0px 10px 8px 5px rgba(24, 144, 255, 0.5);
        }

        &:first-child {
          background: linear-gradient(to right, #034373, #1890ff);
        }

        &:last-child {
          background: linear-gradient(to right, #1890ff, #3eb8f1);
        }

        a {
          width: 100%;
          height: 100%;
          text-decoration: none;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #ffffff;
        }

        .link-text {
          font-size: 30px;
          font-family: 黑体;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
